<template>
	<view>
		<!-- <image v-if="detail.thumb" :src="detail.thumb" mode=""></image>
		<view class="text">
			<text class="title">{{ detail.description }}</text>
			<view class="info">
				<text>{{ detail.author }}</text>
				<text>{{ detail.create_time }}</text>
			</view>
			<view style="width: 100%;padding: 0;" v-html="content" ref="content"></view>
		</view> -->
		
		
		<view class="banner">
			<image class="banner-img" :src="detail.thumb"></image>
			<view class="banner-title">{{detail.description}}</view>
		</view>
		<view class="article-meta">
			<text class="article-author">{{ detail.author}}</text>
			<text class="article-text">发表于</text>
			<text class="article-time">{{detail.create_time}}</text>
		</view>
		<view class="article-content">
			<rich-text :nodes="content"></rich-text>
		</view>
	</view>
</template>

<script>
	import {
		getDetail
	} from '@/api/article.js'
	import {mixin} from '@/static/mixin.js'
	export default {
		mixins:[mixin],
		onLoad: function(option) {
			let that = this;
			getDetail({
				id: option.id
			}).then(res => {
				console.log(res);
				that.detail = res;
				that.content = res.content.content;
				const htmlString = that.content;
				const styleString = 'style="max-width: 100%; height: auto;"';
				that.content = htmlString.replace('img', `img ${styleString}`);
			})
		},
		data() {
			return {
				content: '',
				detail: {}
			};
		},
	};
</script>

<style scoped lang="scss">
	.banner {
		height: 360rpx;
		overflow: hidden;
		position: relative;
		background-color: #ccc;
	}
	
	.banner-img {
		width: 100%;
	}
	
	.banner-title {
		max-height: 84rpx;
		overflow: hidden;
		position: absolute;
		left: 30rpx;
		bottom: 30rpx;
		width: 90%;
		font-size: 32rpx;
		font-weight: 400;
		line-height: 42rpx;
		color: white;
		z-index: 11;
	}
	
	.article-meta {
		padding: 20rpx 40rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		color: gray;
	}
	
	.article-text {
		font-size: 30rpx;
		// line-height: 50rpx;
		margin: 0 20rpx;
	}
	
	.article-author,
	.article-time {
		font-size: 30rpx;
	}
	
	.article-content {
		padding: 0 30rpx 80rpx;
		overflow: hidden;
		font-size: 30rpx;
		margin-bottom: 30rpx;
	}
</style>
